
<template>
  <div class="box">
    <div class="start"
         @click="$router.push('/yihu/search')">
      <img src="@/assets/img/icon_shou.png"
           alt="">
      关联医护人员
    </div>

    <van-pull-refresh style="min-height: 80vh;"
                      v-model="refreshing"
                      @refresh="onRefresh">
      <van-list v-model="loading"
                :finished="finished"
                finished-text="END"
                @load="getData">
        <div class="list">
          <div class="item"
               :key="ins"
               v-for="(i, ins) in list"
               @click="show(i)">
            <van-row>
              <van-col span="4">
                <img class="toux"
                     :src="i.avatar"
                     alt="">
              </van-col>
              <van-col span="20">
                <h1>{{i.nickname}}</h1>
                <p>{{i.hospital}}/{{i.department}}/{{i.professional}}</p>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <!-- 弹出层 -->
    <van-popup v-model="yihuShow"
               :closeable="closeable">
      <div class="item">
        <van-row>
          <van-col span="6">
            <img class="toux"
                 :src="medicalInfo.avatar"
                 alt="">
          </van-col>
          <van-col span="18">
            <h1>{{medicalInfo.nickname}}</h1>
            <p>{{medicalInfo.hospital}}/{{medicalInfo.department}}/{{medicalInfo.professional}}</p>
          </van-col>
        </van-row>
      </div>
      <div class="video">
        <img class="v_img"
             src="@/assets/img/guankan.png"
             alt="">
        <span>患教视频</span>
        <button @click="playVideo(medicalInfo.teach_video)">观看</button>
      </div>
      <button class="btn"
              @click="removeAssociate(medicalInfo.id)">
        解除关联
      </button>
    </van-popup>

     <!-- 弹出层 -->
    <van-popup v-model="videoShow">
      <div class="video-item">
        <div class="title">患教视频</div>
        <video class="video"
               style="height: 100%;"
               controls
               autoplay
               :src="videoSrc"
               poster=""></video>
      </div>
      <button class="video-btn" @click="videoShow = false">
        关闭
      </button>
    </van-popup>

  </div>
</template>
<script>
import { associateMedicalList, removeAssociate } from '@/api/user'
export default {
  name: 'YiHu',
  data () {
    return {
      yihuShow: false,
      closeable: true,
      parameter: {
        page_index: 0,
        page_size: 20
      },
      refreshing: false,
      loading: false,
      finished: false,
      list: [], // 已关联患者列表
      medicalInfo: {},
      videoSrc: '',
      videoShow: false
    }
  },
  mounted () {
  },
  methods: {
    playVideo (teach_video) {
      if (!teach_video) return this.$toast.fail('改医护还未绑定视频')
      this.videoShow = true
      this.videoSrc = this.$baseUrl + teach_video
    },
    // 下拉刷新
    onRefresh () {
      // TODO 刷新一定要重置页码
      this.parameter.page_index = 0
      this.finished = false
      this.loading = true
      this.getData()
    },
    // 查询已关联医护列表
    async getData () {
      // TODO TEST vant-list 分页逻辑
      this.parameter.page_index += 1
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      const { data, code, msg } = await associateMedicalList(this.parameter)
      this.loading = false
      if (code !== 1) {
        this.finished = true
        return this.$toast.fail(msg)
      }
      if (this.parameter.page_index === 1) this.list = []
      this.list.push(...data.data || [])
      if (this.list.length >= data.total) {
        this.finished = true
      }
    },
    // 患者解除关联医护
    async removeAssociate (medical_id) {
      const { code, msg } = await removeAssociate({ medical_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('解除关联成功')
      this.yihuShow = false
      // 刷新列表
      this.refreshing = true
      this.onRefresh()
    },
    // 解除关联弹出层
    show (info) {
      this.medicalInfo = info
      this.yihuShow = true
    }
  }

}
</script>
<style  scoped lang='less'>
// 视频弹出层
.video-item {
    width: 100%;
    height: 150px;
    // background-color: red;
    padding: 6px 10px;
    margin-top: 5px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
    .title {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 600;
      text-align: center;
      line-height: 22px;
      color: #161616;
      margin-bottom: 10px;
    }
    .video {
      width: 100%;
      height: 100%;
    }
  }
.video-btn {
  transform: translateY(20px);
  width: 40%;
  height: 32px;
  background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
  border-radius: 16px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #ffffff;
  letter-spacing: 1.8px;
  border: none;
  margin-left: 30%;
}
// end视频弹出层

/deep/.van-icon-cross {
  color: #000000;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 10px 20px;
  box-sizing: border-box;
  .start {
    height: 44px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    border-radius: 8px;
    text-align: center;
    line-height: 46px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #ffffff;
    img {
      width: 13px;
      height: 15px;
      margin-right: 3px;
      vertical-align: middle;
    }
  }
  .list {
    width: 100%;
    margin-top: 20px;
    .item {
      width: 100%;
      height: 70px;
      padding: 10px 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      .toux {
        width: 40px;
        height: 40px;
        margin: 5px auto;
      }
      h1 {
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 22px;
        color: #161616;
      }
      p {
        height: 16px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 16px;
        color: #595959;
        margin: 5px 0;
      }
    }
  }
  /deep/.van-popup {
    width: 70%;
    height: 224px;
    border-radius: 8px;
    .item {
      width: 100%;
      height: 70px;
      padding: 6px 20px;
      margin-top: 30px;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      .toux {
        width: 40px;
        height: 40px;
        margin: 5px auto;
      }
      h1 {
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 22px;
        color: #161616;
      }
      p {
        height: 16px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 16px;
        color: #595959;
        margin: 5px 0;
      }
    }
    .video {
      width: 100%;
      height: 70px;
      padding: 6px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      .v_img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        vertical-align: middle;
      }
      span {
        display: inline-block;
        height: 20px;
        vertical-align: middle;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #161616;
      }
      button {
        width: 39px;
        height: 17px;
        vertical-align: middle;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin-left: 10px;
        background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
        border-radius: 9px;
        border: none;
      }
    }
    .btn {
      width: 40%;
      height: 32px;
      background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
      border-radius: 16px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 20px;
      color: #ffffff;
      letter-spacing: 1.8px;
      border: none;
      margin-left: 30%;
    }
  }
}
</style>
